<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Master</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }

        .game-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 800px;
            width: 90%;
        }

        .game-header {
            margin-bottom: 2rem;
        }

        .game-title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #00b4d8, #90e0ef);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: titleGlow 2s infinite alternate;
        }

        @keyframes titleGlow {
            from {
                text-shadow: 0 0 10px rgba(0, 180, 216, 0.5);
            }

            to {
                text-shadow: 0 0 20px rgba(144, 224, 239, 0.5);
            }
        }

        .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 2rem;
            font-size: 1.2rem;
        }

        .stat-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 10px;
            min-width: 120px;
        }

        .text-display {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
            font-size: 1.5rem;
            line-height: 1.5;
            min-height: 200px;
            position: relative;
        }

        .text-display span {
            position: relative;
        }

        .text-display span.current {
            background: rgba(0, 180, 216, 0.3);
            border-radius: 3px;
        }

        .text-display span.correct {
            color: #90e0ef;
        }

        .text-display span.incorrect {
            color: #ff6b6b;
            text-decoration: underline;
        }

        .input-area {
            margin-bottom: 2rem;
        }

        #textInput {
            width: 100%;
            padding: 1rem;
            font-size: 1.2rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            outline: none;
            transition: all 0.3s;
        }

        #textInput:focus {
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 10px rgba(0, 180, 216, 0.5);
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

        .btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 25px;
            background: linear-gradient(45deg, #00b4d8, #90e0ef);
            color: white;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 180, 216, 0.3);
        }

        .btn:disabled {
            background: rgba(255, 255, 255, 0.1);
            cursor: not-allowed;
        }

        .difficulty-selector {
            margin-bottom: 1rem;
        }

        .difficulty-btn {
            padding: 0.5rem 1rem;
            margin: 0 0.5rem;
            border: none;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .difficulty-btn.active {
            background: linear-gradient(45deg, #00b4d8, #90e0ef);
        }

        .progress-bar {
            width: 100%;
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: linear-gradient(45deg, #00b4d8, #90e0ef);
            width: 0%;
            transition: width 0.3s;
        }

        @media (max-width: 600px) {
            .game-container {
                padding: 1rem;
            }

            .game-title {
                font-size: 2rem;
            }

            .stats {
                flex-direction: column;
                gap: 1rem;
            }

            .text-display {
                font-size: 1.2rem;
                padding: 1rem;
            }
        }
    </style>
</head>

<body>
    <div class="game-container">
        <div class="game-header">
            <h1 class="game-title">Typing Master</h1>
            <div class="difficulty-selector">
                <button class="difficulty-btn active" data-difficulty="easy">Easy</button>
                <button class="difficulty-btn" data-difficulty="medium">Medium</button>
                <button class="difficulty-btn" data-difficulty="hard">Hard</button>
            </div>
        </div>
        <div class="stats">
            <div class="stat-box">
                <div>WPM</div>
                <div id="wpm">0</div>
            </div>
            <div class="stat-box">
                <div>Accuracy</div>
                <div id="accuracy">0%</div>
            </div>
            <div class="stat-box">
                <div>Time</div>
                <div id="time">60s</div>
            </div>
        </div>
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        <div class="text-display" id="textDisplay"></div>
        <div class="input-area">
            <input type="text" id="textInput" placeholder="Start typing..." autocomplete="off">
        </div>
        <div class="controls">
            <button class="btn" id="startBtn">Start Game</button>
            <button class="btn" id="resetBtn" disabled>Reset</button>
        </div>
    </div>

    <script>
        const textDisplay = document.getElementById('textDisplay');
        const textInput = document.getElementById('textInput');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const wpmElement = document.getElementById('wpm');
        const accuracyElement = document.getElementById('accuracy');
        const timeElement = document.getElementById('time');
        const progressBar = document.getElementById('progress');
        const difficultyBtns = document.querySelectorAll('.difficulty-btn');

        const texts = {
            easy: [
                "The quick brown fox jumps over the lazy dog.",
                "Programming is fun and challenging.",
                "Learning to type fast is a useful skill.",
                "Practice makes perfect in everything."
            ],
            medium: [
                "The ability to type quickly and accurately is essential in today's digital world.",
                "Programming languages like JavaScript and Python are widely used in web development.",
                "Regular practice can significantly improve your typing speed and accuracy.",
                "The best way to learn is by doing and making mistakes along the way."
            ],
            hard: [
                "The complexity of modern programming languages requires a deep understanding of computer science principles and algorithms.",
                "Mastering the art of typing involves developing muscle memory and maintaining consistent practice over time.",
                "The development of artificial intelligence and machine learning has revolutionized the way we approach problem-solving.",
                "Understanding the fundamentals of data structures and algorithms is crucial for writing efficient and scalable code."
            ]
        };

        let currentText = '';
        let currentIndex = 0;
        let startTime;
        let timer;
        let timeLeft = 60;
        let isGameActive = false;
        let currentDifficulty = 'easy';

        function getRandomText() {
            const textArray = texts[currentDifficulty];
            return textArray[Math.floor(Math.random() * textArray.length)];
        }

        function displayText() {
            textDisplay.innerHTML = '';
            currentText.split('').forEach((char, index) => {
                const span = document.createElement('span');
                span.textContent = char;
                if (index === currentIndex) {
                    span.classList.add('current');
                }
                textDisplay.appendChild(span);
            });
        }

        function updateStats() {
            const timeElapsed = (Date.now() - startTime) / 60000; // in minutes
            const words = currentText.slice(0, currentIndex).split(' ').length;
            const wpm = Math.round(words / timeElapsed);
            wpmElement.textContent = wpm;

            const correctChars = document.querySelectorAll('.correct').length;
            const totalChars = currentIndex;
            const accuracy = totalChars > 0 ? Math.round((correctChars / totalChars) * 100) : 0;
            accuracyElement.textContent = `${accuracy}%`;

            const progress = (currentIndex / currentText.length) * 100;
            progressBar.style.width = `${progress}%`;
        }

        function startGame() {
            if (isGameActive) return;

            isGameActive = true;
            currentText = getRandomText();
            currentIndex = 0;
            timeLeft = 60;
            startTime = Date.now();

            textInput.value = '';
            textInput.focus();
            startBtn.disabled = true;
            resetBtn.disabled = false;

            displayText();
            updateStats();

            timer = setInterval(() => {
                timeLeft--;
                timeElement.textContent = `${timeLeft}s`;

                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        function endGame() {
            isGameActive = false;
            clearInterval(timer);
            startBtn.disabled = false;
            textInput.blur();

            const finalWPM = wpmElement.textContent;
            const finalAccuracy = accuracyElement.textContent;
            alert(`Game Over!\nWPM: ${finalWPM}\nAccuracy: ${finalAccuracy}`);
        }

        textInput.addEventListener('input', (e) => {
            if (!isGameActive) return;

            const inputChar = e.target.value.slice(-1);
            const currentChar = currentText[currentIndex];

            const spans = textDisplay.querySelectorAll('span');
            spans[currentIndex].classList.remove('current');

            if (inputChar === currentChar) {
                spans[currentIndex].classList.add('correct');
                currentIndex++;
                if (currentIndex < currentText.length) {
                    spans[currentIndex].classList.add('current');
                }
            } else {
                spans[currentIndex].classList.add('incorrect');
            }

            e.target.value = '';
            updateStats();

            if (currentIndex === currentText.length) {
                currentText = getRandomText();
                currentIndex = 0;
                displayText();
            }
        });

        difficultyBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                difficultyBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentDifficulty = btn.dataset.difficulty;
            });
        });

        startBtn.addEventListener('click', startGame);
        resetBtn.addEventListener('click', () => {
            clearInterval(timer);
            startGame();
        });
    </script>
</body>

</html>